<script>
    // 项目模态表单页
    Vue.component('material-form', {
        template: `
<el-dialog :visible.sync="dialogShow" width="600px" @close="closeModal">
    <h3 slot="title">
        <span v-if="materialForm.id">编辑材料</span>
        <span v-else>新增材料</span>
    </h3>
    <el-form ref="form" :rules="materialRules" :model="materialForm" label-width="80px">
    <el-form-item v-if="materialForm.id" class="hidden">
    <el-input v-model="materialForm.id" disabled></el-input>
    </el-form-item>
    <el-form-item label="材料名称" prop="title" required>
    <el-input autocomplete="off" v-model="materialForm.title"></el-input>
    </el-form-item>


    <el-form-item label="材料单位" prop="spec">
    <el-input autocomplete="off" v-model="materialForm.spec"></el-input>
    </el-form-item>

<!--    <el-form-item label="材料价格" prop="price">-->
<!--    <el-input autocomplete="off" v-model="materialForm.price"></el-input>-->
<!--    </el-form-item>-->

    <el-form-item label="备注" prop="memo">
    <el-input autocomplete="off" v-model="materialForm.memo"></el-input>
    </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
    <el-button @click="closeModal">取 消</el-button>
    <el-button type="primary" @click="handleMaterialForm">确 定</el-button>
    </div>
 </el-dialog>
    `,
        props: ['dialog-show','form-row'],
        computed: {
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            currentTally () {
                return this.$store.state.currentTally
            }
        },
        watch: {
            dialogShow:{
                handler (newVal) {},
                deep:true,
                immediate: true
            },
            formRow: {
                handler (newVal) {
                    this.materialForm = newVal
                },
                deep:true
            }
        },
        data:function(){
            return {
                materialForm:{},
                materialRules:{
                    title: [
                        { required: true, message: '请输入材料名称', trigger: 'blur' }
                    ],
                },
            }
        },
        methods: {
            closeModal(){
                this.$emit('modalClose')
            },
            handleMaterialForm(){
                let that = this
                let postUrl;
                if(that.materialForm.id) {
                    postUrl = '/api/material/edit'
                }else{
                    postUrl = '/api/material/add'
                }
                that.materialForm.tally_id = that.currentTallyId
                that.materialForm['price'] = 0;
                axios.post(postUrl,that.materialForm,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.$message({
                            type: 'success',
                            message: '操作成功~'
                        })
                        that.$store.dispatch('getProjectList',that.currentTallyId)
                        that.$emit('modalClose')
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            }
        }
    })
</script>
